<template>
  <div class="dialog">
    <el-dialog
      :title="info.isadd ? '添加秒杀杀杀杀' : '编辑秒杀杀杀杀'"
      :before-close="cancel"
      :visible.sync="info.isshow"
      center
    >
     <el-form :model="seckInfo" :rules="rules" ref="seckInfo">
        <el-form-item
          label="秒杀活动"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input v-model="seckInfo.title" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="秒杀活动期限" :label-width="formLabelWidth">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
          <el-form-item
          prop="first_cateid"
          label="一级分类"
          :label-width="formLabelWidth"
        >
          <el-select
            @change="changeCate(false)"
            v-model="seckInfo.first_cateid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="二级分类"
          :label-width="formLabelWidth"
          prop="second_cateid"
        >
          <el-select
            v-model="seckInfo.second_cateid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in secondArr"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="商品"
          :label-width="formLabelWidth"
          prop="goodsid"
        >
          <el-select placeholder="请选择" v-model="seckInfo.goodsid" @change="changeGoods(false)">
            <el-option
              v-for="item in goodslist"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="seckInfo.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="addInfo" v-if="info.isadd" type="primary"
          >添 加</el-button
        >
        <el-button @click="editInfo" v-else type="primary">编 辑</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
import { seckAdd,seckInfo,seckEdit } from "../../util/request/api";
export default {
  props: ["info"],
  data() {
    return {
        seckInfo: {
        title: "", 
        begintime: "",
        endtime:"",
        first_cateid: "", 
        second_cateid: "", 
        goodsid: "", 
        status: 1 
      },
       secondArr: [],
       goodsArr:[],
       rules: {
        title: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
    };
  },
    computed: {
       ...mapGetters({
       catelist: "cate/getCateList",
       goodslist: "goods/getGoodsList",

    }),
  },
   mounted() {
        this.getCateList();
         this.getSeckList();
         this.getGoodsList()
  },
  methods: {
    ...mapActions({
       getSeckList: "seck/getSeckAction",
       getGoodsList: "goods/getGoodsAction",
       getCateList: "cate/getCateAction",
    }),
    cancel() {
      this.$emit("cancel", false);
      this.empty();
    },
    empty() {
      this. seckInfo={
        title: "", 
        begintime: "",
        endtime:"",
        first_cateid: "", 
        second_cateid: "", 
        goodsid: "", 
        status: 1 
      }
    },
    changeCate(n) {
      console.log(this.seckInfo.first_cateid, "一级分类id");
      let index = this.catelist.findIndex(
        (item) => item.id == this.seckInfo.first_cateid
      );
      this.secondArr = this.catelist[index].children;
      console.log(index, "索引");
      if (!n) {
        this.seckInfo.second_cateid = "";
      }
    },
    changeGoods(n) {
      this.goodslist.findIndex(
        (item) => item.id == this.seckInfo.goodsid
      );
    },
    addInfo() {
     this.$refs.seckInfo.validate(valid => {
        if (valid) {
          seckAdd(this.seckInfo).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.cancel();
              this.getSeckList();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    },
    lookup(id) {
     seckInfo({ id }).then(res => {
        if (res.code == 200) {
          this.seckInfo = res.list;
          this.seckInfo.id = id;
            this.changeCate(true);
          this.changeGoods(true);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    editInfo() {
      this.$refs.seckInfo.validate(valid => {
        if (valid) {
          seckEdit(this.seckInfo).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.cancel();
              this.getSeckList();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
}
